<!-- 秒杀 -->
<template>
	<view class="seckill-list" v-if="showType">
		<view class="seckill-list-header df-cen-rl">
			<view class="df-ai-cen">
				<view class="seckill-header-img"><image :src="$Utils.img(staticImgUrl + 'miaosha-bg.png')" mode="widthFix" style="width: 100%;"></image></view>
				<view class="df-ai-cen" >
					<!-- v-if="tiemObj.hh != ''" -->
					<block v-if="tiemShow">
						<view class="tiem-item">{{ tiemObj.hh }}</view>
						<view class="tiem-fuhao">:</view>
						<view class="tiem-item">{{ tiemObj.mm }}</view>
						<view class="tiem-fuhao">:</view>
						<view class="tiem-item">{{ tiemObj.ss }}</view>
					</block>
					<block v-else><view class="end-box">{{seckillTimeName}}</view></block>
				</view>
			</view>
			<view class="margin-right text-nav-right" @click="jumpSeckillList" style="margin-right: 18rpx;">
				更多秒杀
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<block v-if="seckillData.length > 0">
			<scroll-view class="scroll-seckill" :scroll-x="true" :scroll-with-animation="true">
				<view class="scroll-seckill-item" v-for="(item, inx) in seckillData" :key="inx" @click="seckillBtn(item)">
					<!-- <image :src="$Utils.img(item.sku_image)" mode="" class="image-radius"></image> -->
					<view class="itemImage">
						<image :src="item.sku_image" mode="" :lazy-load="true"></image>
					</view>
					<view class="seckill-goods-title line-text">{{ item.goods_name }}</view>
					<view class="seckill-goods-price">￥{{ item.seckill_price }}</view>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
export default {
	name: 'seckill-list',
	data() {
		return {
			showType: true,
			seckillData: [],
			title: '',
			tiemShow: false,
			tiemConten: null,
			tiemObj: {
				hh: '',
				mm: '',
				ss: ''
			},
			seckillTimeName:''
		};
	},
	props: {
		site_id:{
			type: [Number, String],
			default: 0
		}
	},
	methods: {
		init() {
			let newObj = {
				app_type: 'h5',
				app_type_name: 'H5',
				web_city: 0,
				site_id:this.site_id
			};
			this.$Apis.seckilTiem(newObj).then(res => {

				if (res.list.length > 0) {
					let newNum = 0;
					let newSeckillObj = {};
					res.list.forEach(v => {
						let end = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_end_time * 1000;
						let start = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_start_time * 1000;
						
						// 获取合适时间的秒杀
						newSeckillObj = v;
						if (end > new Date().getTime() && start < new Date().getTime() && newNum < 1) {
							// newSeckillObj = v;
							newNum++;
						}
					});
					this.title = newSeckillObj.name;
					let endTime = new Date(this.$Utils.dateStr('', false)).getTime() + newSeckillObj.seckill_end_time * 1000;
					let seckillObj = {
						seckill_id: newSeckillObj.seckill_id,
						site_id: this.site_id,
						page: 1,
						page_size: 10
					};
					this.getSeckillList(seckillObj);
					// console.log("newNum",newNum)
					if (newNum === 0) {
						this.tiemShow = false;
						this.seckillTimeName = newSeckillObj.name
					}else{
						// 处理倒计时
						// console.log('处理倒计时', this.$Utils.countdown(endTime));
						if (this.$Utils.countdown(endTime)) {
							this.tiemObj = this.$Utils.countdown(endTime);
							this.tiemShow = true;
							this.showType = true;
							// 做判断当倒计时结束时都为0
							this.tiemConten = setInterval(() => {
								if (this.$Utils.countdown(endTime)) {
									this.tiemObj = this.$Utils.countdown(endTime);
								} else {
									this.tiemShow = false;
									clearInterval(this.tiemConten);
								}
							}, 1000);
						} else {
							// this.showType = true;
						}
					}
				}
			});
		},
		// 获取秒杀列表
		getSeckillList(obj) {
			this.$Apis.getSeckillGoods(obj).then(res => {
				if(res.list.length>0){
					this.showType = true
				}else{
					this.showType = false
				}
				this.seckillData = res.list;
				// console.log("获取秒杀列表",this.seckillData)
			});
			// console.log('log', this.seckillData);
		},
		seckillBtn(item) {
			this.$emit('seckillFn', item);
		},
		jumpSeckillList() {
			this.$Router.push({
				path: '/publicPages/activity/timeLimit',
				query:{
					site_id:this.site_id
				}
			});
		},
	},
	mounted() {
		// setInterval(()=>{
			this.init();
		// },1000)
	}
};
</script>

<style lang="scss">
.seckill-list {
	background: #FFFFFF;
	width: 690rpx;
	margin: 20rpx auto 0 auto;
	border-radius: 20rpx;
	padding: 30rpx 0 30rpx 30rpx;
	.text-nav-right {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fd3b5c;
	}
	.seckill-list-header {
		margin-bottom: 20rpx;
		.seckill-header-img {
			width: 180rpx;
			margin-right: 10rpx;
		}
	}
	.scroll-seckill {
		white-space: nowrap;
		width: 95%;
		// margin: 0 auto;
		.scroll-seckill-item {
			position: relative;
			display: inline-block;
			width: 190rpx;
			margin-right: 20rpx;
		}
		.image-radius {
			margin: 0 auto;
			max-width: 100%;
			height: 180rpx;
			// background-color: #f9f9f9;
			padding: 10rpx 0;
			// border-radius: 12rpx;
		}
		.seckill-goods-title {
			width: 100%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #222222;
			margin: 10rpx 0 6rpx;
		}
		.seckill-goods-price {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ff364e;
		}
	}
	.tiem-item {
		margin: 0 4rpx;
		border-radius: 6rpx;
		padding: 6rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		background-color: #ff2442;
	}
	.tiem-fuhao {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ff2442;
	}
	.end-box {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		padding: 6rpx 20rpx;
		background-color: #cccccc;
	}
}
	.itemImage {
		width: 196rpx;
		height: 200rpx;
	}
	image{
		width: 100%;
		height: 100%;
	}
</style>
